伸縮自如的Flask [day 25] Flask with web cam

flask

wilsonsujames 2021-06-08 18:09:12 ‧ 6756 瀏覽

分享至

github:
https://github.com/wilsonsujames/webcam/tree/master/stream-video-browser

參考攻略:
https://blog.miguelgrinberg.com/post/video-streaming-with-flask

在介紹網路攝影機之前，可以先看一下python的生成器:

def yield_fun():
    a = 1
    b = 2
    yield a
    yield b

print(yield_fun())

generator = yield_fun()
print(next(generator))
print(next(generator))

可以發現yield_fun()為一個生成器物件，在每一個next(generator)中，產生該生成器中下一步的值。

可以在參考更詳盡的說明:

https://blog.csdn.net/mieleizhi0522/article/details/82142856

再來可以看程式的部分:

<html>
  <head>
    <title>Pi Video Surveillance</title>
  </head>
  <body>
    <h1>Pi Video Surveillance</h1>
    <img style="width: 800px;height: 800px;" src="{{ url_for('video_feed') }}">
  </body>
</html>

可以發現圖片img，由flask中video_feed function來提供。

在camera.py 的部分:

from cv2 import cv2 as cv2 

class VideoCamera(object):
    def __init__(self):
        #由opencv來獲取預設為0 裝置影像
        self.video = cv2.VideoCapture(0)

    def __del__(self):
        self.video.release()        

    def get_frame(self):
        ret, frame = self.video.read()

        ret, jpeg = cv2.imencode('.jpg', frame)

        return jpeg.tobytes()

由get_frame來獲取每一帪的影像。

主程式webcam.py:

from flask import Flask, render_template, Response, jsonify
from camera import VideoCamera
from cv2 import cv2 as cv2 

app = Flask(__name__)

video_stream = VideoCamera()


def gen(camera):
    while True:
        frame = camera.get_frame()
        yield (b'--frame\r\n'
               b'Content-Type: image/jpeg\r\n\r\n' + frame + b'\r\n\r\n')
        

@app.route('/')
def index():
    
    return render_template('index.html')


@app.route('/video_feed')
def video_feed():
    print(type(gen(video_stream)))
    print(gen(video_stream))
    

    return Response(gen(video_stream),
                mimetype='multipart/x-mixed-replace; boundary=frame')

if __name__ == '__main__':
    app.run(host='127.0.0.1', debug=True,port="5000")

利用gen這個生成器來將每一帪的圖片產出，並且設定好header為串流的資訊。

影片版本: